<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>SCUT | Ali</title>

		<!-- Mobile Meta -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Favicon -->
		<link rel="shortcut icon" href="images/favicon.ico">

		<!-- Web Fonts -->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,300&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,300' rel='stylesheet' type='text/css'>

		<!-- Bootstrap core CSS -->
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

		<!-- Font Awesome CSS -->
		<link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet">

		<!-- Plugins -->
		<link href="css/animations.css" rel="stylesheet">

		<!-- Worthy core CSS file -->
		<link href="css/style.css" rel="stylesheet">

		<!-- Custom css --> 
		<link href="css/custom.css" rel="stylesheet">
	</head>

	<body class="no-trans">
		<!-- scrollToTop -->
		<!-- ================ -->
		<div class="scrollToTop"><i class="icon-up-open-big"></i></div>

		<!-- header start -->
		<!-- ================ --> 
		<header class="header fixed clearfix navbar navbar-fixed-top">
			<div class="container">
				<div class="row">
					<div class="col-md-4">

						<!-- header-left start -->
						<!-- ================ -->
						<div class="header-left clearfix">

							<!-- logo -->
							<div class="logo smooth-scroll">
								<a href="#"><img id="logo" src="images/logo.png" alt="Worthy"></a>
							</div>

							<!-- name-and-slogan -->
							<div class="site-name-and-slogan smooth-scroll">
								<div class="site-name"><a href="#">SCUT | Ali</a></div>
								<div class="site-slogan"><a target="_blank" href="#">JavaWeb  </a>优秀作品征集</div>
							</div>

						</div>
						<!-- header-left end -->

					</div>
					<div class="col-md-8">

						<!-- header-right start -->
						<!-- ================ -->
						<div class="header-right clearfix">

							<!-- main-navigation start -->
							<!-- ================ -->
							<div class="main-navigation animated">

								<!-- navbar start -->
								<!-- ================ -->
								<nav class="navbar navbar-default" role="navigation">
									<div class="container-fluid">

										<!-- Toggle get grouped for better mobile display -->
										<div class="navbar-header">
											<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
												<span class="sr-only">Toggle navigation | SCUT Ali</span>
												<span class="icon-bar"></span>
												<span class="icon-bar"></span>
												<span class="icon-bar"></span>
											</button>
										</div>

										<!-- Collect the nav links, forms, and other content for toggling -->
										<div class="collapse navbar-collapse scrollspy smooth-scroll" id="navbar-collapse-1">
											<ul class="nav navbar-nav navbar-right">
												<li class="active"><a href="#banner">首页</a></li>
												<li><a href="#AboutP">关于作品</a></li>
												<li><a href="#AboutTec">关于技术</a></li>
												<li><a href="#SignUpActivity">征集报名</a></li>
											</ul>
										</div>

									</div>
								</nav>
								<!-- navbar end -->

							</div>
							<!-- main-navigation end -->

						</div>
						<!-- header-right end -->

					</div>
				</div>
			</div>
		</header>
		<!-- header end -->

		<!-- banner start -->
		<!-- ================ -->
		<div id="banner" class="banner">
			<div class="banner-image"></div>
			<div class="banner-caption">
				<div class="container">
					<div class="row">
						<div class="col-md-8 col-md-offset-2 object-non-visible" data-animation-effect="fadeIn">
							<h1 class="text-center">我们是 <span>华工阿里巴巴高校技术联盟</span></h1>
							<p class="lead text-center">想学习Java技术吗？想了解阿里吗？想获得阿里集团参观机会和纪念品吗？小伙伴们快来参加我们的JavaWeb优秀作品征集活动吧！</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- banner end -->

		<!-- section start -->
		<!-- ================ -->
		<div class="section clearfix object-non-visible" data-animation-effect="fadeIn">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h1 id="AboutP" class="title text-center">关于 <span>作品</span></h1>
						<p class="lead text-center">作为世界Java最强的公司，我们只关注于Java</p>
						<div class="space"></div>
						<div class="row">
							<div class="col-md-6">
								<img src="images/java-logo.jpg" alt="">
								<div class="space"></div>
							</div>
							<div class="col-md-6">
								<p>本次征集的作品是关于在线报名系统的JavaWeb程序，欢迎参加我们的作品征集活动。</p>
								<p>作品的评审标准：评委根据提交的可运行参赛作品的一下标准类进行评审和筛选，最终评选出获奖的作品。</p>
								<ul class="list-unstyled">
									<li><i class="fa fa-caret-right pr-10 text-colored"></i> 创意与实用性 - 30% - 网页应用构想的创意、动机以及实用性。</li>
									<li><i class="fa fa-caret-right pr-10 text-colored"></i> 技术难度 - 30% - 实现网站所使用的技术以及其难度等。</li>
									<li><i class="fa fa-caret-right pr-10 text-colored"></i> 最终效果 - 40% - 最终获得的页面运行效果。</li>
									<li><i class="fa fa-caret-right pr-10 text-colored"></i> 千万别照抄Demo哦！</li>
								</ul>
							</div>
						</div>
						<div class="space"></div>
						<h2>作品要求及说明</h2>
						<div class="row">
							<div class="col-md-6">
								<ul class="list-unstyled">
									<li><i class="fa fa-caret-right pr-10 text-colored"></i> 要求使用Java语言结合Web开发。</li>
									<li><i class="fa fa-caret-right pr-10 text-colored"></i> 内容为在线报名系统相关的任何内容。</li>
									<li><i class="fa fa-caret-right pr-10 text-colored"></i> 作品内容健康向上，符合本次比赛作品征集要求。</li>
									<li><i class="fa fa-caret-right pr-10 text-colored"></i> 提交作品时提交运行的说明以及用于展示的PPT或图片，评审阶段最好提供可以访问的链接</li>
                                    <li><i class="fa fa-caret-right pr-10 text-colored"></i> 作品版权归属作者，作者投稿后，即表示同意主办方在本次比赛相关活动及宣传中拥有所参赛作品的使用权和发布权。同时作者应保证参赛作品需为未曾在同类比赛中获奖作品。</li>
                                    <li><i class="fa fa-caret-right pr-10 text-colored"></i> 参赛作品为参赛者亲自设计制作，不能由他人代替，严禁抄袭他人作品</li>
                                    <li><i class="fa fa-caret-right pr-10 text-colored"></i> 各参赛队伍自行备份作品以便核对</li>
                                    <li><i class="fa fa-caret-right pr-10 text-colored"></i> <a target="_blank">  优秀的作品可能被我们采纳作为以后的活动页面哦！  </a></li>
								</ul>
							</div>
							<div class="col-md-6">
								<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
									<div class="panel panel-default">
										<div class="panel-heading" role="tab" id="headingOne">
											<h4 class="panel-title">
												<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
													奖项设置 JavaWeb优秀作品征集之一：在线报名系统
												</a>
											</h4>
										</div>
										<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
											<div class="panel-body">
                                                <br />
												一等奖一名（300元）+ 获奖证书 + 阿里巴巴集团参观实习机会 + 积分*3
                                                <br />
                                                <br />
                                                <br />
                                                二等奖一名（200元）+ 获奖证书 + 阿里巴巴集团参观实习机会 + 积分*2
                                                <br />
                                                <br />
                                                <br />
                                                三等奖三名 精美淘公仔纪念品+获奖证书 + 积分*1
                                                <br />
											</div>
										</div>
									</div>
									<div class="panel panel-default">
										<div class="panel-heading" role="tab" id="headingTwo">
											<h4 class="panel-title">
												<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
													JavaWeb优秀作品征集系积分最高团队
												</a>
											</h4>
										</div>
										<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
											<div class="panel-body">
                                                
                                                <br />
                                                <br />
												奖金 800 元 + 获奖证书 + 阿里集团校招直通初试
                                                <br />
                                                <br />
                                                <br />
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- section end -->

		<!-- section start -->
		<!-- ================ -->
		<div class="section translucent-bg bg-image-1 blue">
			<div class="container object-non-visible" data-animation-effect="fadeIn">
				<h1 id="AboutTec"  class="text-center title">关于技术</h1>
				<div class="space"></div>
				<div class="row">
					<div class="col-sm-6">
						<div class="media">
							<div class="media-body text-right">
								<h4 class="media-heading">关于Java</h4>
								<p>Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。</p>
							</div>
							<div class="media-right">
								<i class="fa fa-cog"></i>
							</div>
						</div>
						<div class="media">
							<div class="media-body text-right">
								<h4 class="media-heading">关于Web</h4>
								<p>web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。</p>
							</div>
							<div class="media-right">
								<i class="fa fa-check"></i>
							</div>
						</div>
						<div class="media">
							<div class="media-body text-right">
								<h4 class="media-heading">关于HTML</h4>
								<p>超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，超文本标记语言超文本标记语言。它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容，如：文字如何处理，画面如何安排，图片如何显示等。</p>
							</div>
							<div class="media-right">
								<i class="fa fa-desktop"></i>
							</div>
						</div>
						<div class="media">
							<div class="media-body text-right">
								<h4 class="media-heading">关于JS</h4>
								<p>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</p>
							</div>
							<div class="media-right">
								<i class="fa fa-users"></i>
							</div>
						</div>
					</div>
					<div class="space visible-xs"></div>
					<div class="col-sm-6">
						<div class="media">
							<div class="media-left">
								<i class="fa fa-leaf"></i>
							</div>
							<div class="media-body">
								<h4 class="media-heading">关于CSS</h4>
								<p>层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。</p>
							</div>
						</div>
						<div class="media">
							<div class="media-left">
								<i class="fa fa-area-chart"></i>
							</div>
							<div class="media-body">
								<h4 class="media-heading">关于JavaWeb</h4>
								<p>Java Web，是用Java技术来解决相关web互联网领域的技术总和。web包括：web服务器和web客户端两部分。Java在客户端的应用有java applet，不过使用得很少，Java在服务器端的应用非常的丰富，比如Servlet，JSP和第三方框架等等。Java技术对Web领域的发展注入了强大的动力。</p>
							</div>
						</div>
						<div class="media">
							<div class="media-left">
								<i class="fa fa-child"></i>
							</div>
							<div class="media-body">
								<h4 class="media-heading">关于Servlet</h4>
								<p>Servlet，全称Java Servlet，未有中文译文。是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据，生成动态Web内容。狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。</p>
							</div>
						</div>
						<div class="media">
							<div class="media-left">
								<i class="fa fa-codepen"></i>
							</div>
							<div class="media-body">
								<h4 class="media-heading">关于更多</h4>
								<p>还有很多很多的相关技术：JSP、Freemarker、Spring、Scala、Hadoop...在这里写也写不完，大家可以加入我们互相交流。</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- section end -->

		<!-- section start -->
		<!-- ================ -->
		<div class="default-bg space blue">
			<div class="container">
				<div class="row">
					<div class="col-md-8 col-md-offset-2">
						<h1 class="text-center">快来参加活动吧！</h1>
					</div>
				</div>
			</div>
		</div>
		<!-- section end -->

		<footer id="footer">

			<!-- .footer start -->
			<!-- ================ -->
			<div class="footer section">
				<div class="container">
					<h1 class="title text-center" id="SignUpActivity">征集报名</h1>
					<div class="space"></div>
					<div class="row">
						<div class="col-sm-6">
							<div class="footer-content">
								<p class="large">我们是华南理工大学阿里巴巴高校联盟，加入我们的粉丝团（208816024）可以获得更多活动动态信息哦，欢迎加入！</p>
								<ul class="list-icons">
									<li><i class="fa fa-map-marker pr-10"></i> 华工生活区C12活动室</li>
									<li><i class="fa fa-phone pr-10"></i> +86 18826456265</li>
									<li><i class="fa fa-envelope-o pr-10"></i> 1261226244@qq.com</li>
								</ul>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="footer-content">
								<!-- action="../AliDemo1/signUpConfirm" 此为相对路径 -->
								<form role="form" id="footer-form" action="./signUpConfirm" method="post">
									<div class="form-group has-feedback">
										<label class="sr-only" for="name2">姓名</label>
										<input type="text" class="form-control" id="name2" placeholder="姓名" name="name" required>
										<i class="fa fa-user form-control-feedback"></i>
									</div>
									<div class="form-group has-feedback">
										<label class="sr-only" for="email2">邮箱</label>
										<input type="email" class="form-control" id="email2" placeholder="邮箱" name="email" required>
										<i class="fa fa-envelope form-control-feedback"></i>
									</div>
									<div class="form-group has-feedback">
										<label class="sr-only" for="message2">信息</label>
										<textarea class="form-control" rows="8" id="message2" placeholder="信息" name="message" required></textarea>
										<i class="fa fa-pencil form-control-feedback"></i>
									</div>
									<input type="submit" value="提交" class="btn btn-default">
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- .footer end -->

			<!-- .subfooter start -->
			<!-- ================ -->
			<div class="subfooter">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<p class="text-center">Copyright © 2016 by <a target="_blank" href="http://htmlcoder.me">SCUT | Ali</a>.</p>
						</div>
					</div>
				</div>
			</div>
			<!-- .subfooter end -->

		</footer>
		<!-- footer end -->

		<!-- JavaScript files placed at the end of the document so the pages load faster
		================================================== -->
		<!-- Jquery and Bootstap core js files -->
		<script type="text/javascript" src="plugins/jquery.min.js"></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

		<!-- Modernizr javascript -->
		<script type="text/javascript" src="plugins/modernizr.js"></script>

		<!-- Isotope javascript -->
		<script type="text/javascript" src="plugins/isotope/isotope.pkgd.min.js"></script>
		
		<!-- Backstretch javascript -->
		<script type="text/javascript" src="plugins/jquery.backstretch.min.js"></script>

		<!-- Appear javascript -->
		<script type="text/javascript" src="plugins/jquery.appear.js"></script>

		<!-- Initialization of Plugins -->
		<script type="text/javascript" src="js/template.js"></script>

		<!-- Custom Scripts -->
		<script type="text/javascript" src="js/custom.js"></script>

	</body>
</html>
